<template>
  <div class="burger-app">
    <burgerNavTop></burgerNavTop>
    <div class="app-container" ref="scrollContainer">
      <burgerHeader title="这是大标题">
        <template #minTitle>
          小标题
        </template>
      </burgerHeader>
      <div class="app-main">
        <router-view />
      </div>
    </div>
    <burgerNav></burgerNav>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useScroll } from '@vueuse/core'
import burgerNav from "@com/burgerNav/index.vue";
import burgerNavTop from "@com/burgerNavTop/index.vue";
import burgerHeader from "@com/burgerHeader/index.vue";

const scrollContainer = ref(null)
const { x, y, isScrolling, arrivedState, directions } = useScroll(scrollContainer)


onMounted(() => {

})
</script>

<style scoped lang="postcss">
.logo {
  height: 6em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.burger-app {
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 2px 0;
  background-color: var(--view-bg-color);
  font-size: 18px;

  /* background: linear-gradient(#9ebbf7, #b4efed); */
  .app-container {
    height: calc(100vh - var(--nav-top-height) - 10px);
    width: calc(100vw - var(--nav-width) - 10px);
    overflow: hidden;
    padding: 10px;
    padding-bottom: 0;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    .app-main {
      overflow-y: auto;
      border-radius: var(--border-r);
      min-height: calc(100vh - var(--nav-top-height) - var(--header-height) - 35px);
    }
  }
}
</style>
